import { Component, Input, Output, EventEmitter } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LayoutContainer } from '../../models/layout.models';

@Component({
  selector: 'app-step-container',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="layout-container step-container">
      <div class="layout-header">
        <div class="layout-title">
          <i class="material-icons">timeline</i>
          {{containerData?.title || 'Step页容器'}}
        </div>
        <div class="layout-actions">
          <button (click)="onSettings()"><i class="material-icons">settings</i></button>
          <button (click)="onDelete()"><i class="material-icons">delete</i></button>
        </div>
      </div>
      <div class="layout-content">
        <div class="step-headers">
          <div class="step-header active">
            <div class="step-circle">1</div>
            <div class="step-title">步骤一</div>
          </div>
          <div class="step-header">
            <div class="step-circle">2</div>
            <div class="step-title">步骤二</div>
          </div>
          <div class="step-header">
            <div class="step-circle">3</div>
            <div class="step-title">步骤三</div>
          </div>
        </div>
        <div class="step-content">
          <div class="empty-column">
            <i class="material-icons">add_circle_outline</i>
            <span>Step 内容区域</span>
          </div>
        </div>
      </div>
    </div>
  `,
  styleUrls: ['./single-column.component.scss']
})
export class StepContainerComponent {
  @Input() id!: string;
  @Input() containerData?: LayoutContainer;
  @Output() delete = new EventEmitter<string>();

  onSettings() {
    console.log('Settings clicked for container:', this.id);
  }

  onDelete() {
    this.delete.emit(this.id);
  }
}
